// 个人中心页面
//引入less
require('../css/mine.less')
require('../fonts/iconfont.css')
document.ready(function () {
  console.log("mine.js");
  window.utils.addTabs('mine');
  // 判断是否登录
  window.utils.isLogin()

  // 动态添加tab栏目
  window.utils.addTabs('mine')

  // 退出登录
  const logoutBtn = document.querySelector('#logoutBtn') // 退出登录按钮
  logoutBtn.addEventListener('click', function () {

    window.utils.showDialog('是否确定退出?') // 弹出确认框

    // 选中确认按钮和取消按钮
    const confirmBtn = document.querySelector('#confirmBtn')
    const cancelBtn = document.querySelector('#cancelBtn')

    // 绑定点击事件 - 取消
    cancelBtn.addEventListener('click', function () {
      const dialog = document.querySelector('#dialog') // 选中弹框
      dialog.remove() // 删除
    })

    // 确定
    confirmBtn.addEventListener('click', function () {
      const dialog = document.querySelector('#dialog') // 选中弹框
      dialog.remove() // 删除

      // 弹出一个提示框
      window.utils.showToast('succ', '退出成功', 2000)

      setTimeout(function () {
        // 清除本地数据
        window.localStorage.clear()
        // 跳转到登录
        window.location.href = './login.html'
      }, 2000)
    })

  })

  // 获取当前用户id
  const userId = window.localStorage.getItem('userId')

  /* 获取dom */
  const avatar = document.querySelector('#avatar')
  const nicknameElem = document.querySelector('#nickname')
  const signText = document.querySelector('#signText')
  const dynamic = document.querySelector('#dynamic')
  const sumTime = document.querySelector('#sumTime')
  const sumCalorie = document.querySelector('#sumCalorie')

  /* 获取个人信息 */
  function getInfo() {
    window.$http.get(`users/accountinfo?userId=${userId}`, function (res) {
      if (res.status === 0) {
        const imgurl = res.data.imgurl // 头像
        const nickname = res.data.nickname // 电话号码
        const sign = res.data.sign // 个性签名

        // 渲染
        if (imgurl) {
          avatar.src = 'http://139.9.177.51:8099' + imgurl
        }
        nicknameElem.textContent = nickname
        if (sign) {
          signText.textContent = sign
        }
        // 把当前账号数据存入本地
        window.localStorage.setItem('user', JSON.stringify(res.data));
      }
    })
  }
  getInfo()

  /* 获取徽章信息 */
  function getBadgeInfo() {
    window.$http.get(`users/mysportsBadge?userId=${userId}`, function (res) {
      if (res.status === 0) {
        const dynamicCount = res.data.dynamicCount // 动态条数
        const times = res.data.sports.times // 运动时间
        const calorie = res.data.sports.calorie // 消耗卡路里

        // 渲染
        dynamic.textContent = dynamicCount
        sumTime.textContent = times
        sumCalorie.textContent = calorie
      }
    })
  }
  getBadgeInfo()


  /* 手写头像上传 */
  const uploadAvatar = document.querySelector('#uploadAvatar') // 选中上传框

  // 监听事件
  uploadAvatar.addEventListener('change', function () {
    console.dir(this.files[0])
    // 要把文件发送给后端 必须装入 formData里面  然后把 formData直接发送给后端
    var fd = new FormData()

    // 把放入放入FormData中
    // fd.append('imgurl', this.files[0])
    // console.log(fd.get('imgurl'))

    // 这个时候 把fd 通过ajax发送给后端即可。

    /* 上传图片 */
    window.$uploadFile('users/upload', 'imgurl', this.files[0], function (res) {
      if (res.status === 0) {
        // 渲染图片
        avatar.src = 'http://139.9.177.51:8099' + res.data
        // 把图片地址存入本地存储
        window.localStorage.setItem('imgurl', res.data)
      }
    })

  })

  // 给头像绑定点击事件
  avatar.addEventListener('click', function (e) {
    // 阻止默认行为
    e.preventDefault()
    uploadAvatar.click() // 触发input上传框的点击
  })
})